<template>
  <HeaderTitle class="m-10" :textObj="textObj" />
  <!-- 提示 -->
  <div class="bg-fff m-10">
    <el-alert
      title="目前计费功能暂不完善，所以计费功能暂未正式启用。"
      type="warning"
      show-icon
    />
    <el-alert
      title="正式收费后，我们将发送通知至首页公告；在此期间，若有欠费情况可联系我们：发送邮件至 sensecap@seeed.cc"
      type="warning"
      show-icon
    ></el-alert>
    <el-link class="bg-fff pl-20 pt-10 pb-10" style="color: #409eff"
      >点击查看收费规则</el-link
    >
  </div>
  <!-- 设备概览 -->

  <div class="bg-fff m-10">
    <div class="flex p-20 f14 bb3">
      <el-icon><Warning /></el-icon>
      <span>设备概览</span>
    </div>
    <div class="p-20 f14">
      <strong class="mr-30">计划：</strong><span class="ml-30">按量付费</span>
    </div>
    <div class="p-20 f14">
      <strong class="mr-30">状态：</strong><span class="ml-30">正常</span>
    </div>
  </div>

  <div class="bg-fff m-10">
    <div class="flex p-20 f14 bb3">
      <el-icon><Warning /></el-icon>
      <span>设备概览</span>
    </div>
    <div class="p-20 f14">
      <strong class="mr-30">余额：</strong><span class="ml-30">{{store.balance}}￥</span>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 300px ;margin: 20px;">
      <el-form-item label="金额：">
        <el-input clearable placeholder="请输入充值金额" v-model="form.amount" />
      </el-form-item>
      <el-form-item label="备注：">
        <el-input clearable placeholder="请输入充值备注" v-model="form.desc" />
      </el-form-item>
    </el-form>
    <el-form-item >
     <div class="fcc ml-30 pb-20 pl-30" style="width: 110px;">
      <el-button type="primary" @click="onSubmit">充值</el-button>
     </div>
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { feeInfoStore } from "../../pinia/fee";
import { ElMessage, ElMessageBox } from "element-plus";
const store = feeInfoStore();

const textObj = ref({
  title: "费用",
  name: "账户信息",
  dsc: "展示当前账户的剩余消息额度，可根据兑换码兑换消息额度。",
});
const form = ref({
  amount: '',
  desc: ''
})

const onSubmit = async () => {
    const amount = Number(form.value.amount);
    if (isNaN(amount) || amount <= 0) {
        ElMessage.error("请输入有效金额");
        return;
    }
    if (form.value.desc === '') {
        ElMessage.error("备注不能为空");
        return;
    }
    try {
        const confirmResult = await ElMessageBox.confirm(
            '确定要充值吗?',
            '温馨提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }
        );
        // 手动提取需要的数据
        const rechargeData = {
            amount: form.value.amount,
            desc: form.value.desc
        };
        await store.addFee(rechargeData);
        ElMessage.success("充值成功");
        form.value.amount = '';
        form.value.desc = '';
        store.getBalance();
    } catch (error) {
        if (error === 'cancel') {
            ElMessage.info("已取消充值");
        } else {
            console.error("充值失败详细原因：", error);
            ElMessage.error("充值失败，请重试");
        }
    }
}

onMounted(() => {
  store.getBalance();
})
</script>

<style>
</style>